<template>
	<!-- 跳转页面 -->
	<view class="navPage">
		<view class="usercomplex">
			<!-- 底层颜色 -->
			<view class="bottomcolor">
				<!-- 用户信息 -->
				<view class="userinfo">
					<view class="userbox">
						<!-- <image class="userimg" :src="userimg" mode="aspectFill"></image> -->
						<image class="userimg" src="/common/Otherimages/userimg3.jpg" mode="aspectFill"></image>
						<!-- <view class="username">{{username1}}</view> -->
						<view class="username">是小戴小戴啊~</view>
					</view>
					<!-- 关注 -->
					<view class="gaunzhubox">
						<view class="guanzhubox1">
							<view  class="guanzhu" v-if="isclick==false">
								关注
							</view>
							<view class="guanzhu" v-else>
								已关注
							</view>
							<view class="ui">
								<uni-icons type="fire" v-if="isclick==false" size="25" color="rgba(0,0,0,0.6)" @click="attentionClick" ></uni-icons>
								<!-- 当被点击时显示这个图标 -->
								<uni-icons type="fire-filled" v-else size="25" color="rgb(255,0,0,0.6)"  @click="attentionClick"></uni-icons>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<!-- 评分率 -->
		<view class="rating">
			<view class="box">
				<view class="fabu topbox">
					<view class="fabutext ">发布</view>
					<view class="fabunumber ">
						55个
					</view>
				</view>
			</view>
			<view class="box">
				<view class="fabu topbox">
					<view class="fabutext ">好评率</view>
					<view class="fabunumber ">
						96%
					</view>
				</view>
			</view>
			<view class="box">
				<view class="fabu topbox">
					<view class="fabutext ">24小时回复率</view>
					<view class="fabunumber ">
						77%
					</view>
				</view>
			</view>
			
			
		</view>
		<!-- 图片 -->
		<view class="image" >
			<image class="img" src="/common/Otherimages/34.jpg" mode="aspectFill" @click="preimg(pic)"></image>
			<view class="other">
				<image class="img1" src="/common/Otherimages/37.jpg" mode="aspectFill" @click="preimg(pic)"></image>
				<image class="img2" src="/common/Otherimages/38.jpg" mode="aspectFill" @click="preimg(pic)"></image>
			</view>
		</view>
		<!-- 描述详情 -->
		<view class="text">
			<view class="maoshu">描述：</view>
			<view class="contenttext">
				救命，谁帮我拿快递谢谢。我要去公司上班，没空拿快递
			</view>
			
		</view>
		<!-- 添加一个新的区域来显示用户的留言 -->
		<!-- 留言列表区域 -->
		<NavUserComments v-for="(comment, index) in userComments" 
		:key="index" 
		:comment="comment"></NavUserComments>
		<!-- 联系栏 -->
		<view class="connect">
			<view class="connectbox ">
				<button class="message " @click="onClick">留言</button>
				<button class="way " @click="buttonClick">与墨主商量配送方式</button>
			</view>
		</view>
		
		<!-- 当联系栏被点击打开对话框 -->
		<uni-popup ref="popupleft" type="dialog">
			<uni-popup-dialog 
			mode="input" 
			maxlength=1000
			title="留言给墨主"
			placeholder="可以将你想说的向墨主留言"
			:duration="2000" 
			v-model="userMessage"
			borderRadius="20px 20px 20px 20px"
			before-close=true
			@close="close" 
			@confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 配送方式弹出框 -->
		<uni-popup class="giveway"
		 ref="popupright" 
		 is-mask-click="true"
		  type="center">
			<view class="givewaybox">
				<!--配送选择 -->
				<view class="checkbox1">
					<radio-group @change="radioChange">
						<view class="box1">
							<radio :checked="index==current" color="#5A9CFF"></radio>
							<view>第三方无人机配送</view>
						</view>
						<view class="box2">
							<radio  :checked="index==current" color="#5A9CFF"></radio>
							<view>第三方无人车配送</view>
						</view>
						<view class="box3">
							<radio  :checked="index==current" color="#5A9CFF"></radio>
							<view>邻区共同配送</view>
						</view>
						<view class="box4">
							<radio  :checked="index==current" color="#5A9CFF"></radio>
							<view>快递员，外卖员配送</view>
						</view>
					</radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="confirmbox">
					<view class="cancel1" @click="closeright">取消</view>
					<view class="confirm1" @click="confirmright">确定</view>
				</view>
			</view>
			
		</uni-popup>
		<view>
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script setup>
import {ref,watchEffect} from "vue"
import {onLoad} from "@dcloudio/uni-app"
const pic=[
	"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFxnP5gl5k0l_OWGMfAfprXNrPsxrme3vk4A&s",
	"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuZxVjM_ArDU7DqvUGtIliPOko5ST3bs4bWw&s",
	"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUloyoVVo0Jtd8Q7lbp4k4FveT8SqslSucWw&s",
	"https://img.21jingji.com/uploadfile/cover/20230428/1682683536951952.jpg"
	
]
const isclick=ref(false)
const popupleft=ref(null)
const popupright=ref(null)
const userimg=ref("/common/Otherimages/userimg3.jpg");
const username1=ref("是小戴小戴啊~");
const clickstate=ref("false");
// v-model绑定对话框内容
const userMessage=ref("")
// 新增留言列表数据存储
const userComments = []; 
const comment=ref({})
// 添加一个新的 ref 来存储选中的单选框的值
const selectedRadio = ref(null)
const current=ref(-1);
const radioChange=(e)=>{
	console.log(e.detail.value)
	//  for (let i = 0; i < 4; i++) {
	// 	if (this.items[i].value === e.detail.value) {
	// 		this.current = i;
	// 		break;
	// 	}
	// }
	selectedRadio.value = e.detail.value
	current.value=e.detail.value
}
let uname=ref("");
let uimg=ref("");
// 接收传过来的参数
onLoad((e)=>{
	// 对传过来的参数进行解构
	// console.log("e:",e)
	// let {usrimg=null,username=null}=e;
	// console.log(usrimg,username)
	// if (usrimg && usrimg !== "") {
	// 		userimg.value=usrimg;
	// }else{
	// 	console.log(usrimg,username)
	// 	userimg.value = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRELheUT-QWl9wTcK1Fiq9qWqI2kJrKG_JsMQ&s";  // 替换为你的默认图片路径
	// 	console.log(usrimg,username)
	// }
	// username1.value=username;
	console.log("e1:",e)
	 uname = decodeURIComponent(e.username);
	uimg = decodeURIComponent(e.userimg);
	console.log("navP接收传递过来的username",uname)
	console.log("navP接收传递过来的userimg",uimg)
	
	
})
watchEffect(() => {
	   console.log("正在监听username：",uname)
	   console.log("正在监听userimg：",uimg)
});
// 留言点击事件
const onClick=(e)=>{
	// uni.showToast({
	//   title: `点击${e.content.text}`,
	//   icon: 'none'
	// })
	// 当被点击打开弹窗
	popupleft.value.open();
	console.log("打开弹窗");
}
const close=()=>{
	console.log("取消");
	popupleft.value.close();
}
// 确认留言时，将新留言添加到列表
const confirm=(e)=>{
	console.log("确定");
	popupleft.value.close();
	// // 在确认函数中，将输入的内容保存到 userMessage 中
	// userMessage.value = 输入的内容 
	uni.showToast({
		title:"留言成功",
		icon:"success"
	})
	console.log("留言返回值：",e)
	const newComment = {
	  userImg: userimg.value,
	  userName: username1.value,
	  commentText: userMessage.value
	};
	console.log("newComent",newComment)
	// 更新列表数组
	userComments.push(newComment);
	console.log("userComments",userComments)
	userMessage.value = ''; // 清空输入框
	popupleft.value.close();
	// 更新 NavUserComments.vue 组件的 comment 属性
	comment.value = newComment;
}
const closeright=()=>{
	popupright.value.close();
}
const confirmright=()=>{
	popupright.value.close();
	
	if (selectedRadio.value !== null){
			uni.showToast({
			  title: `发送成功，请等待墨主消息`,
			  icon: 'none'
			})
			selectedRadio.value = null;
		}
		console.log(selectedRadio.value)
		// 点击确定按钮后，重置 current 为 -1，表示没有任何单选框被选中
			current.value = -1
	
}
// 商量配送方式点击事件
const buttonClick=()=>{
	// 当被点击打开弹窗
	popupright.value.open();
	// uni.showToast({
	//   title: `点击商量配送方式`,
	//   icon: 'none'
	// })
	
}
// 关注按钮点击事件
const attentionClick=()=>{
	console.log("点击");
	// console.log(e);
	isclick.value=!isclick.value
	if(isclick.value){
		uni.showToast({
		  title: `已关注`,
		  mask:true,
		  icon: 'none'
		})
	}else{
		uni.showToast({
		  title: `已取消关注`,
		  mask:true,
		  icon: 'none'
		})
	}
	
}
// 实现图片预览效果
function preimg(urlImg){
	let currentImg=ref(urlImg)
	console.log("output",currentImg.value)
	uni.previewImage({
		urls:currentImg.value, 
		loop:true
	})
	
	
}
</script>

<style lang="scss" scoped>
@keyframes gradientFlow {
 0% { background-position: 0% 0%; }
   25% { background-position: 50% 0%; }
   50% { background-position: 25% 0%; }
   75% { background-position: 75% 0%; }
   100% { background-position: 100% 0%; }
   
}	
.navPage{
	background: linear-gradient(179deg, rgba(98, 29, 243, 0.17) 3.57%, rgba(255, 125, 125, 0.10) 12.6%, rgba(255, 140, 140, 0.11) 22.62%, rgba(255, 255, 255, 0.20) 98.13%), radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	 background-size: 250% 100%; /* 增大背景尺寸以允许平滑过渡 */
	 animation: gradientFlow 15s linear alternate-reverse infinite; /* 添加动画效果 */
	padding:10rpx ;
	// margin:18rpx 58rpx 30rpx 45rpx;
	.usercomplex{
		// border:1rpx solid #000;
		width: 670rpx;
		height: 94rpx;
		margin:18rpx 58rpx 30rpx 30rpx;
		.bottomcolor{
			width: 670rpx;
			height: 94rpx;
			border-radius: 20rpx;
			background: linear-gradient(90deg, rgba(255, 83, 83, 0.62) 0%, rgba(248, 217, 54, 0.68) 49.53%, rgba(244, 148, 4, 0.47) 74%, rgba(98, 43, 255, 0.17) 100%);
			// filter: blur(2.1500000953674316px);
			backdrop-filter: blur(6.050000190734863px);
			
		}
		// 用户信息样式
		.userinfo{

			width: 670rpx;
			height: 94rpx;		
			border-radius: 10px;
			opacity: 0.74;
			background: rgba(217, 217, 217, 0.96);
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			display: flex;
			// padding:5rpx 28rpx 5rpx 28rpx;
			.userbox{
				width: 330px;
				display: flex;
				padding:15rpx 28rpx ;
				// border:1rpx solid #000;
				border-right: 1rpx solid rgba(0,0,0,0.1);
				.userimg{
					width: 60rpx;
					height: 60rpx;
					margin-right: 30rpx;
					border-radius: 50%;
					opacity: 0.74;
				}
				.username{
					color: #000;
					// text-align: center;
					font-family: "Noto Sans SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					margin-right:90rpx ;
				}
				
			}
			
		}
		// 关注样式
		.gaunzhubox{
			display: flex;
			width:270rpx;
			align-items: center;
			justify-content: center;
			.guanzhubox1{
				display: flex;
				margin-left:10rpx;
				justify-content: center;
				// box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
				.guanzhu{
					
				}
				.ui{
					
				}
			}
			
		}
	}
	
	.rating{
		// border:1px solid #000;
		margin:18rpx 25rpx 30rpx 40rpx;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		
		// height: 186rpx;
		.box{
			width:198rpx;
			height: 186rpx;
			border-radius: 14rpx;
			background: linear-gradient(180deg, rgba(255, 83, 83, 0.62) 0%, rgba(248, 217, 54, 0.68) 46.86%, rgba(244, 148, 4, 0.47) 70.02%, rgba(98, 43, 255, 0.17) 94.62%);
			// filter: blur(2.1500000953674316px);
			backdrop-filter: blur(6.050000190734863px);
		}
		.topbox{
			width:198rpx;
			height: 186rpx;
			border-radius: 14rpx;
			opacity: 0.74;
			background: rgba(217, 217, 217, 0.96);
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
		}
		.text{
			color: rgba(0, 0, 0, 0.67);
			font-family: "Noto Sans SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
		// 发布
		.fabu{
			  position: relative;
			.fabutext{
				padding-top:8rpx;
				color: rgba(0, 0, 0);
				text-align: center;
				font-family: "Noto Sans SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
			.fabunumber{
			    position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				// border: 1px solid #000;
				color: rgba(0, 0, 0, 0.68);
				text-align: center;
				font-family: "Noto Sans SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
			
		}
	}
	// 图片
	.image{
		width: 628rpx;
		// border:1rpx solid #000;
		margin:22rpx 45rpx;
		.img{
			width:100%;
			height: 428rpx;
			border-radius: 26rpx;
		}
		.other{
			width: 100%;
			display: grid;
			grid-template-columns: 30% auto;
			gap:95rpx;
			margin-top: 5rpx;
			.img1{
				width: 270rpx;
				height: 260rpx;
				border-radius: 26rpx;
				
			}
			.img2{
				width: 346rpx;
				height: 258rpx;
				border-radius: 26rpx;
			}
		}
	}
	// 描述
	.text{
		
		padding:0rpx 40rpx ;
		.maoshu{
			margin-bottom: 30rpx;
		}
		.contenttext{
			width: 100%;
			// height:700rpx;
			padding-bottom:100rpx;
			border-bottom: 1rpx solid  rgba(255, 192, 203, 0.5);
			color: #000;
			font-family: "Noto Sans SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}
	// 联系栏
	.connect{
		width:100%;
		height:170rpx;
		background: white;
		position: fixed;
		bottom:0;
		// bottom:80rpx;
		.connectbox{
			display:flex;
			.message{
				width: 350rpx;
				height: 50px;
				margin-top:35rpx;
				margin-left:0rpx;
				margin-right: 0rpx;
				// margin-left: 10rpx;
				// border:1px solid #000;
				border-radius: 14px;
				background: #FFCDCD;
				box-shadow: 0px 4px 14.4px 0px rgba(0, 0, 0, 0.25);
			}
			.way{
				width: 380rpx;
				height: 50px;
				margin-top:35rpx;
				border-radius: 14px;
				background: #FFCDCD;
				box-shadow: 0px 4px 14.4px 0px rgba(0, 0, 0, 0.25);
			}
		}
		
		// bottom:env(safe-area-insert-bottom);
		// padding-bottom:;
	}
	// 配送方式样式
	.giveway{
		margin-left:130rpx ;
		margin-top: 328rpx;
		// border:1rpx solid #000;
		.givewaybox{
			position:relative;
			width: 478rpx;
			height: 718rpx;
			// border:0.5rpx solid #000;
			border-radius: 66rpx;
			background: white;
			background: rgba(219, 204, 204);
			box-shadow: 0px -8px 7.1px 0px rgba(108, 97, 97, 0.25) inset, -6px 4px 9.8px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 10px 11px 10.3px 0px rgba(255, 255, 255, 0.25) inset;
			.checkbox1{
				position:absolute;
				left: 76rpx;
				top: 110rpx;
				.box1{
					display: flex;
					margin-bottom: 68rpx;
				}
				.box2{
					display: flex;
					margin-bottom: 68rpx;
				}
				.box3{
					display: flex;
					margin-bottom: 68rpx;
				}
				.box4{
					display: flex;
					margin-bottom: 68rpx;
				}
			}
			// 取消确定样式
			.confirmbox{
				display:flex;
				position: absolute;
				top: 560rpx;
				left: 72rpx;
				// border:0.5rpx solid #000;
				.cancel1{
					
					width: 120rpx;
					height: 76rpx;
					border-radius: 30rpx;
					background: #83ACFC;
					box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
					margin-right: 98rpx;
					color: #000;
					
					display: inline-flex;
					justify-content: center;
					align-items: center;
					font-family: "Noto Sans SC";
					font-size: 30rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
				.confirm1{
					width: 120rpx;
					height: 76rpx;
					border-radius: 30rpx;
					background: #B5AEFF;
					box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
					color: #000;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					font-family: "Noto Sans SC";
					font-size: 30rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
			}

		}
	}
	// 留言列表区域
	.user-comments{
		padding:0rpx 40rpx ;
	}
}

</style>
